<template>
  <div class="tabs">
    <div
      v-for="item in tabs"
      :key="item.value"
      :class="active === item.value ? 'tab-item active' : 'tab-item'"
      @click="selected(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array
    }
  },
  data() {
    return {
      active: ""
    };
  },
  methods: {
    selected(value) {
      this.active = value;
      this.$emit('change', value);
    }
  }
};
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: space-evenly;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  .tab-item {
    min-width: 40px;
    text-align: center;
    padding: 10px;
    transition: 0.3;
  }
}
.active {
  background-color: #373739;
}
</style>
